<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Linkedin Login</title>
      <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background:rgb(42, 140, 238);
        flex-direction: column;
        margin: 0;
    }
    
    .main {
        border-radius: 8px;
        background-color: #fff;
        padding: 10px 20px;
        width: 500px;
        text-align: center;
    }
    
    h1 {
        color: hsl(0, 0%, 100%);
    }
    
    label {
        display: block;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
        color: #555;
        font-weight: bold;
    }
    
    
    input {
        display: block;
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    button {
        border-radius: 4px;
        padding: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        border: none;
        color: white;
        cursor: pointer;
        background-color: #337bce;
        width: 100%;
        font-size: 16px;
    }
    
    .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
</head>

<body>
    <h1  style="color: aliceblue; cursor: pointer;">Linked <span><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi  bi-linkedin" viewBox="0 0 16 16">
        <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
    </svg></span></h1>
    <h1 align="center">Make the most of your professional life</h1>
      <div class="main">
            <form action="">
                  <label for="first">First name</label>
                  <input type="text" id="first" name="first" >
                  <label for="password">Last name</label>
                  <input type="password id="Last name" name="Last name" >
                  <label for="password">Email</label>
                  <input type="password id="Email" name="Email" >
                  <label for="password">Password(6 or more characters)</label>
                  <input type="password id="password" name="password">
                  <p>You agree to the Linkedin <B>User Agreement, Privacy Policy,</B> and <b>Cookie Policy</b></p>


                  <div class="wrap">
                        <button type="submit"
                                onclick="solve()">
                              Agree & Join
                        </button>
                  </div>
            </form>
            <p>Already on Linkedin?
                  <a href="abc"
                     style="text-decoration: none;">
                        Sign in
                  </a>
            </p>
      </div>
      <P style="color: white;">Linkedin Corporation @ 2019</P>
</body>
</html>